<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style1.css">
</head>
<body>


<!--nav内容部分-->
<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="img/brand-white.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active cl" style="color: #fff">
                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Messages</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Docs</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<!--main内容部分-->


<div class="main">
    <div class="container">
        <!--main左边内容部分-->
        <div class="item item-1">
            <div class="card card-1">
                <img src="img/iceland.jpg" alt="">
                <img  class="img-2" src="img/avatar-dhg.png" alt="">
                <h6>Dave Gamache</h6>
                <p>I wish i was a little bit taller, wish i<br>
                    was a baller.</p>
            </div>
            <div class="card card-2">
                <h6>About</h6>
                <p>Went to <a href="#">Oh,Candada</a></p>
                <p>Became friends with<a href="#"> Obama</a></p>
                <p>Worked at <a href="#">Github</a></p>
                <p>Lives in<a href="#"> San Francisco,CA</a></p>
                <p>From <a href="#">Seattle,WA</a></p>
            </div>
            <div class="card card-3">
                <h6>Phonts</h6>
                <div>
                    <img src="img/instagram_5.jpg" alt="">
                    <img src="img/instagram_6.jpg" alt="">
                    <img src="img/instagram_7.jpg" alt="">
                    <img src="img/instagram_8.jpg" alt="">
                    <img src="img/instagram_9.jpg" alt="">
                    <img src="img/instagram_10.jpg" alt="">
                </div>
            </div>
        </div>
        <!--main中间内容部分-->
        <div class="item item-2">
            <div class="card card-4">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item pb-4">
                        <h6>Dave Gamache <span class="span-1">4 min</span></h6>
                        <p class="mb-4">Aenean lacinia bibendum nulla sed consectetur.
                            Vestibulum id ligula porta felis
                            euismodsemper.Morbi leo risus, porta ac consectetur ac,
                            vestibulum at eros. Cras
                            Justo odio, dapibus ac facilisis in, egestas eget quam.
                            Vestibulum id ligula porta felis
                            euismod semper.Cum sociis natoaque penatibus et magnis dis
                            parturient montes,
                            nascetur ridiculus mus.</p>
                        <div class="mc-mt mb-4 ">
                            <img class="mr-2" src="img/unsplash_1.jpg" alt="">
                            <img src="img/instagram_1.jpg" alt="">
                            <img class="mr-2" src="img/instagram_13.jpg" alt="">
                            <img src="img/unsplash_2.jpg" alt="">
                        </div>
                        <h5>Jacon Thorbton: <span class="span-2">Donec id elit non
                                mi porta gravida at eget metus. Vivamus sagittle
                                lacus vel augue laoreet rutrum faucibus dolor auctor.
                                Donec ullamcorper nulla non
                                metus auctor fringilla. Praesent commodo cursus magna.
                                vel scelerisque nisl
                                consectetur et.Sed posuere consectetur est at lobortis.
                                </span>
                        </h5>
                        <h5 class="mt-3">Mark Otto: <span class="span-2">Lorem ipsum dolor sit amet,consectetur adipiscing
                                elit. Fusce dapibus,
                                tellus ac cursus commodo, tordor mauris condimentum nibh,ut fermentum massa
                                justo sit amet risus
                                </span>
                        </h5>
                    </li>
                    <li class="list-group-item pt-4 p3-4">
                        <h6>Jacob Thornton <span class="span-1">12 min</span></h6>
                        <p>Donec id elit non
                            mi porta gravida at eget metus. Vivamus sagittle
                            lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Donec ullamcorper nulla non
                            metus auctor fringilla. Praesent commodo cursus magna.
                            vel scelerisque nisl
                            consectetur et.Sed posuere consectetur est at lobortis.</p>
                    </li>
                    <li class="list-group-item">
                        <h6>Mark Otto <span class="span-1">34 min</span></h6>
                        <p>Donec uilamcorper unlla non metus auctor fringilla.
                            Vestibulum id ligula porta felis
                            euismod semper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam
                            venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.Donec
                            sed odio dui.</p>
                        <img class="img-sub" src="img/instagram_3.jpg" alt="">
                        <h5 class="mt-3">Dave Gameche: <span class="span-2">
                                Donec id elit non
                                mi porta gravida at eget metus. Vivamus sagittle
                                lacus vel augue laoreet rutrum faucibus dolor auctor.
                                Donec ullamcorper nulla non
                                metus auctor fringilla. Praesent commodo cursus magna.
                                vel scelerisque nisl
                                consectetur et.Sed posuere consectetur est at lobortis.
                                </span>
                        </h5>
                    </li>
                </ul>
            </div>
        </div>
        <!--main右边内容部分-->
        <div class="item item-3">
            <div class="card card-5">
                <h6>sponsored</h6>
                <img class="mb-2 img-app" src="img/instagram_2.jpg" alt="">
                <h6>lt might be time to visit lceland.</h6>
                <p class="mb-3">lceland is so chill, and everything
                    looks cool here. Also, we heard the
                    people are pretty nice. What are you
                    waiting for?</p>
                <a class="btn btn-outline-primary mb-3" href="">Buy a ticket</a>
            </div>
            <div class="card card-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h6 class="mt-2">likes</h6>
                        <div class="mr2-1 mb-3">
                            <img src="img/avatar-fat.jpg" alt="">
                            <div>
                                <h6>Jacob Thornton <span style="font-weight: normal">   @fat</span></h6>
                                <a href=""><i></i>Follow</a>
                            </div>
                        </div>
                        <div class="mr2-1">
                            <img src="img/avatar-mdo.png" alt="">
                            <div>
                                <h6>Mark Otto <span style="font-weight: normal">  @mdo</span></h6>
                                <a href=""><i></i>Follow</a>
                            </div>
                        </div>
                    </li>
                    <li class="li-bt list-group-item">
                        <p class="mb-0">Dava really likes these nerds,no one
                            knows why though.</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>
<!--footer内容部分-->
<footer>
    <p>Designed and built with all the love in the world by
        <a href="">@mdo</a>
        ,
        <a href="">@fat</a>
        ,and
        <a href="">@dhg</a>
        .
    </p>
    <span>
        <a href="">About</a>
        <a href="">Terms</a>
        <a href="">Privacy</a>
        <a href="">Licenses</a>
        <a href="">FAQ</a>
    </span>
</footer>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>